<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item key="1">
          <router-link to="/settings">用户管理</router-link>
        </a-menu-item>
        <!-- <a-menu-item key="2">
            <router-link to="/videoList">历史记录查询</router-link>
          </a-menu-item> -->
        <a-menu-item key="3">
          <router-link to="/system">系统设置</router-link>
        </a-menu-item>
        <a-menu-item key="4">
          <router-link to="/">返回首页</router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content style="margin: 10px 10px">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          <RouterView />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Search System ©2024 Created by XiaoCaiDan
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const collapsed = ref(false);
const selectedKeys = ref(['1']); // 默认选中第一个菜单项
const route = useRoute();

// 监听路由变化，动态更新菜单选中项
watch(route, (newRoute) => {
  if (newRoute.path === '/settings') {
    selectedKeys.value = ['1'];
  } else if (newRoute.path === '/videoList') {
    selectedKeys.value = ['2'];
  } else if (newRoute.path === '/system') {
    selectedKeys.value = ['3'];
  } else {
    selectedKeys.value = ['4']; // 默认选中返回首页
  }
}, { immediate: true }); // 立即执行一次，以处理初始化时的路径
</script>

<style scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>